<template>
  <div class="first mr-2">
    <div class="flex align-center justify-center">
      <div class="item-title flex align-center justify-center">
        煤产品销售同比
      </div>
    </div>
    <div id="company-chart05"></div>
  </div>
</template>
<script>
var echarts = require("echarts");

import searchApi from '@/api/search/index'
export default {
  name: "searchFirst",
  data() {
    return {
      dataOneInfo:{},
      time:''
    };
  },
  mounted() {
    this.draw();
    // this.dataOne()
  },
  methods: {
    getTimeTip(){
      let timeSplit = this.time.split("-")
      let currentyear = parseInt(timeSplit[0])
      let lastYear = currentyear - 1
      

      let endMonth = '01'
      if (timeSplit[1] == '01') {
      endMonth = '1月'
      } else {
        endMonth = timeSplit[1]
        endMonth = parseInt(endMonth)
        endMonth = "1-"+endMonth+"月"
      }
      let currentTime = currentyear+'年'+endMonth
      let lastTime = lastYear+'年'+endMonth
      return {
        currentTime:currentTime,
        lastTime:lastTime
      }
    },
    dataOne() {
      let that = this;
      searchApi
        .dataFive({
          time: this.time, 
        })
        .then(function (res) {
          if (res.code == 200) {
            res = res.data || [];
            that.dataOneInfo = res;
            that.$nextTick(() => {
              that.draw();
            });
            
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    draw() {
      let timeTip = this.getTimeTip()
      let that = this
      let nameList = [], valueList=[],value2List=[],hbList=[]
      this.dataOneInfo.map(item=>{
        nameList.push(item.name)
        valueList.push(item.value1)
        value2List.push(item.value2)
        hbList.push(item.percentage)
      })
      var drawCharts = document.getElementById("company-chart05"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      var xData = nameList,
        yData1 = valueList,
        yData2 = value2List,
        yData4 = hbList,
        borderData = [],
        legend = [timeTip.currentTime, timeTip.lastTime, "同比增长"],
        colorArr = [
          {
            start: "rgba(4, 205, 244, 1)",
            end: "rgba(67, 144, 250, 0.9)",
          },
          {
            start: "rgba(51, 255, 153, 1)",
            end: "rgba(0, 144, 142, 1)",
          },
          {
            color: "#EF4864",
          },
        ];
      var normalColor = "rgba(255,255,255,0.5)";
      //   var fontSize = 20;
      let seriesData = [];

      [yData1, yData2, yData4].forEach((item, index) => {
        var obj1 = {};
        var obj2 = {};
        if (index < 2) {
          obj1 = {
            name: legend[index],
            type: "bar",
            stack: legend[index],
            data: item,
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorArr[index].start + "0.7)",
                    },
                    {
                      offset: 0.5,
                      color: colorArr[index].start + "0.3)",
                    },
                    {
                      offset: 1,
                      color: colorArr[index].end,
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#04CDF4",
                 fontSize: that.getRealPX(12),
                },
              },
            },
          };
          obj2 = {
            name: "",
            type: "bar",
            stack: legend[index],
            itemStyle: {
              normal: {
                color: colorArr[index].start + "1)",
              },
            },
            data: borderData,
          };
          seriesData.push(obj1);
          seriesData.push(obj2);
        } else {
          var obj3 = {
            name: legend[index],
            type: "line",
            yAxisIndex: 1,
            smooth: false,
            symbol: "circle",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: colorArr[index].color,
                borderColor: "#fff",
                borderWidth: 1,
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(255, 140, 140, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "#FF8C8C",
                    },
                  ]),
                },
              },
            },
            data: item,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#EF4864",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          seriesData.push(obj3);
        }
      });
      var option = {
        grid: {
          left: "3%",
          top: "16%",
          right: "3%",
          bottom: "10%",
          containLabel: true,
        },
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 20,
          itemHeight: 3,
          right: "0%",
          top: "0%",
          textStyle: {
            color: "#65ABE7",
            fontSize: that.getRealPX(9),
          },
          data: legend,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            for (var i = 0; i < params.length; i++) {
              let unit = "";
              let value = 0;
              if (i == 2) {
                if (params[i].value < 0) {
                  unit = "-";
                }
                value =
                  unit +
                  parseInt(params[0].value / (params[i].value / 100 + 1));
                str +=
                  params[2].name +
                  ":" +
                  params[2].seriesName + '了' +
                  params[2].value +
                  "%";
                ("<br/>");
              } else {
                value = params[i].value;
                str +=
                  params[i].name +
                  ":" +
                  params[i].seriesName +":"+
                  value +
                  "万吨" +
                  "<br/>";
              }
              // str +=
              //   params[i].name +
              //   ":" +
              //   params[i].seriesName +
              //   value +
              //   "万吨" +
              //   "<br/>";
            }

            return str;
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#65C6E7",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位（万吨）",
            nameTextStyle: {
              color: "#65C6E7",
              fontSize: that.getRealPX(12),
            },
            // "min": 0,
            // "max": 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
          {
            type: "value",
            name: "%",
            nameTextStyle: {
              fontSize: that.getRealPX(12),
              color: "#65ABE7",
            },
            // min: -100,
            // max: 100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
        ],
        series: seriesData,
      };
      drawChart.setOption(option);
    },
  },
};
</script>
<style lang="stylus" scoped>
#company-chart05 {
  width: 613px;
  height: 390px;
}

.first {
  width: 613px;
  height: 430px;
  background: url('../../../assets/img/search/bg06.png');
  background-size: 613px 430px;

  .item-title {
    width: 364px;
    height: 40px;
    background: url('../../../assets/img/search/item03.png');
    background-size: 364px 40px;
    margin-top: 6px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #DEF1FF;
  }
}
</style>
